<template>
  <div class="container bg-white mt-3 b-eee px-0">
    <header class="px-4 d-flex justify-content-between py-3">
      <span class="font-xm selectize-item">申请试用</span>
      <!--<span class="selectize-item">我已经注册，现在就 <a href="" class="ml-2">登录</a></span>-->
    </header>
    <form action="">
      <div class="text-center bg-themegrey l-h-3 bg-greystripes">账号信息</div>
      <!--账号信息-->
      <div class="col-lg-6 mx-auto mt-4">
        <div class="form-group row mt-3">
          <label for="account" class="col-lg-3 col-form-label text-lg-right">用户名</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('abbreviation')}">
            <input class="form-control" v-model="experience.account" type="text" id="account" name="用户名"
                   data-vv-validate-on="blur"
                   placeholder="用于登录，4-18位字母或数字，不支持中文"
                   v-validate="'required|min:4|max:18|alpha_num|remote:/user/checkCustomerAccount?account='">
            <span class="text-red" v-show="errors.has('用户名')">{{ errors.first('用户名') }}</span>
          </div>
        </div>
        <div class="form-group row mt-4">
          <label for="password" class="col-lg-3 col-form-label text-lg-right">设置密码</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('password') }">
            <input class="form-control" data-vv-delay="1000" type="password" id="password" name="password" v-model="experience.password" placeholder="6-20位字母或数字，区分大小写" v-validate="'required|min:6|max:20|alpha_num'"
                   :class="{'form-control-danger': errors.has('password') }">
          </div>
        </div>
        <div class="form-group row mt-4 mb-4">
          <label for="password2" class="col-lg-3 col-form-label text-lg-right">确认密码</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('password2') }">
            <input class="form-control" data-vv-delay="1000" type="password" id="password2" placeholder="请再次输入密码" v-model="experience.password2" name="password2" v-validate="'required|confirmed:password'">
            <span class="text-red" v-show="errors.has('password2')">两次输入密码不一致</span>
            <!--两次输入密码不一致-->
          </div>
        </div>
        <div class="form-group row mt-4 mb-4">
          <label for="password2" class="col-lg-3 col-form-label text-lg-right">企业域名</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('域名') }">
            http://<input class="form-control" type="text" id="scope" placeholder="yice"
                          data-vv-validate-on="blur"
                          v-model="experience.scope" name="域名" v-validate="{rules: {required: true,min: 2,max:  8,remote:'/user/checkCustomerScope?scope=', regex: /^[a-z0-9]*$/}}">.pm.xuehu365.com
            <div class="text-muted">2~8个小写字母、数字</div>
            <span class="text-red" v-show="errors.has('域名')">{{ errors.first('域名') }}</span>
            <!--两次输入密码不一致-->
          </div>
        </div>
      </div>
      <div class="text-center bg-themegrey l-h-3 bg-greystripes">企业信息</div>
      <!--企业信息-->
      <div class="col-lg-6 mx-auto mt-4">
        <div class="form-group row mt-3">
          <label for="name" class="col-lg-3 col-form-label text-lg-right">企业全称</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('企业全称')}">
            <input class="form-control" type="text" id="name" name="企业全称" v-model="experience.name" data-vv-delay="1000" placeholder="请填写营业执照上的公司全称，60字以内" v-validate="'required|max:60'">
            <span class="text-red" v-show="errors.has('企业全称')">{{ errors.first('企业全称') }}</span>
          </div>
        </div>
        <div class="form-group row mt-4">
          <label for="abbreviation" class="col-lg-3 col-form-label text-lg-right">企业简介</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('企业简介')}">
            <input class="form-control" type="text" id="abbreviation" name="企业简介" v-model="experience.abbreviation" placeholder="请填写方便识别的公司简称，如：益策，50字以内" v-validate="'required|max:50'">
            <span class="text-red" v-show="errors.has('企业简介')">{{ errors.first('企业简介') }}</span>
          </div>
        </div>
        <div class="form-group row mt-4 mb-4">
          <label for="link-name" class="col-lg-3 col-form-label text-lg-right">联系人姓名</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('link-name')}">
            <input class="form-control" type="text" id="link-name" v-model="experience.linkName" v-validate="'required'" name="link-name">
          </div>
        </div>
        <div class="form-group row mt-4 mb-4">
          <label for="link-email" class="col-lg-3 col-form-label text-lg-right">邮箱</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('email') }">
            <input class="form-control" type="email" id="link-email" data-vv-delay="1000" v-model="experience.linkEmail" v-validate="'required|email'" name="email">
            <span class="text-red" v-show="errors.has('email')">邮箱格式不正确</span>
          </div>
        </div>
        <div class="form-group row mt-4 mb-4">
          <label for="link-mobile" class="col-lg-3 col-form-label text-lg-right">联系人手机</label>
          <div class="col-lg-9" :class="{'has-danger': errors.has('手机号') }">
            <input class="form-control" type="text" data-vv-delay="1000" @input="setDisable" id="link-mobile" v-model="experience.linkMobile" name="手机号" v-validate="{rules: {required: true, regex: /^1[34578]\d{9}$/}}">
            <span class="text-red" v-show="errors.has('手机号')">{{errors.first('手机号')}}</span>
          </div>
        </div>
        <div class="form-group row mt-4 mb-4">
          <label class="col-lg-3 col-form-label text-lg-right"></label>
          <div class="col-lg-9 d-flex justify-content-between" :class="{'has-danger': errors.has('message-code') }">
            <input class="form-control d-inline-block w-65" type="text" name="message-code" placeholder="验证码" id="message-code" v-model="experience.messageCode" v-validate="'required'">
            <button type="button" class="btn btn-code" @click="getCode" v-text="textBtn" :disabled="sendSuc"></button>
          </div>
        </div>
        <div class="form-group row mt-4 mb-4">
          <label class="col-lg-3 col-form-label text-lg-right"></label>
          <div class="col-lg-9 d-flex justify-content-between">
            <input class="form-control btn btn-red text-white pointer" type="button" @click="submitBtn" :disabled="formInvalid" placeholder="验证码" value="提交">
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<!--
  申请试用
-->
<script>
  import {Experience, http} from '../resources'
  export default {
    name: 'experience',
    data: () => ({
      loading: true,
      userName: '',
      msgCode: '',
      unique: false,
      sendSuc: true,
      textBtn: '获取验证码',
      experience: {
        account: '',
        password: '',
        password2: '',
        scope:'',
        name: '',
        abbreviation: '',
        linkEmail: '',
        linkName: '',
        linkMobile: '',
        messageCode: '',
      }
    }),
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.$nextTick(() => vm.$emit('loaded'))
      })
    },
    methods: {
      setDisable () {
        this.$validator.validate('手机号', this.experience.linkMobile).then(success => {
          if (!success) return;
          this.sendSuc = false
        })
      },
      getCode () {
        this.$validator.validate('手机号', this.experience.linkMobile).then(success => {

          if (!success) return

          Experience.code(this.experience.linkMobile).then(response => {
            var that = this;
            if (response.data.code == 0) {
              this.msgCode = response.data.data.msgCode
              this.sendSuc = true
              var num = 60
              var one = setInterval(function () {
                num--
                that.textBtn = '正在发送' + num + 's'
                if (num <= 0) {
                  that.textBtn = '重新获取'
                  that.sendSuc = false
                  clearInterval(one)
                }
              }, 1000)
            } else {
              this.$notice.error(response.msg)
            }
          })
        })

      },
      //提交表单
      submitBtn () {
        this.$validator.validateAll().then(success => {
          if (!success) return
          Experience.save(this.experience).then(response => {
            if (response.data.code == 0) {
              var company = {
                scope:  this.experience.scope,
                account:  this.experience.account
              }
              localStorage.setItem('company',JSON.stringify(company))
              this.$router.push({path: '/customer-save'})
            } else {
              this.$notice.error(response.data.msg)
            }

          });
        })
      }
    },
    computed: {
      formInvalid () {
        return !Object.keys(this.fields).some(k => this.fields[k].dirty) || this.errors.any()
      }
    }
  }
</script>

<style>
  .w-65 {
    width: 65%
  }
  .btn-code {
    width: 32%;
    background-color: #0186D1;
    color: #ffffff;
  }
  #scope {
    display: inline-block !important;
    width: 40% !important;
    margin-left: 10px;
    margin-right: 10px;
  }

</style>